<script setup lang="ts">
import type { PageParams, TravelGuides } from '@/types/home'
import { loadTravelGuidesUsingGet } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'

const travelGuides = ref<TravelGuides[]>([])
const finish = ref(false)
//分页参数
const pageParams: Required<PageParams> = {
  pageNum: 1,
  pageSize: 10,
}
const loadTravelGuidesUsingGetData = async () => {
  //   //退出判断
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多了' })
  }
  const res = await loadTravelGuidesUsingGet(pageParams)
  travelGuides.value.push(...res.data.data)
  // 分页条件
  if (pageParams.pageNum < res.data.total) {
    //页码累加
    pageParams.pageNum++
  } else {
    finish.value = true
  }
}
//重置数据
const resetData = () => {
  pageParams.pageNum = 1
  travelGuides.value = []
  finish.value = false
}
//暴露方法
defineExpose({
  getMore: loadTravelGuidesUsingGetData,
  resetData,
})
onMounted(() => {
  loadTravelGuidesUsingGetData()
})
</script>

<template>
  <view class="travel-guide">
    <view class="title">
      <view class="guide-title">天门山游玩攻略</view>
    </view>

    <view class="guide-container">
      <navigator
        v-for="item in travelGuides"
        :key="item.id"
        :url="`/pages/travelGuide/travelGuide?id=${item.id}`"
        class="guide-item"
      >
        <image :src="item.guideImg" class="guide-image"></image>
        <view class="guide-info">
          <view class="guide-title">{{ item.guideTitle }}</view>
          <view class="guide-description">{{ item.author }}</view>
        </view>
      </navigator>
    </view>
    <view class="loading-text"> {{ finish ? '没有更多数据~' : '正在加载...' }}</view>
  </view>
</template>

<style lang="scss">
.travel-guide {
  padding: 10rpx 20rpx;
  background-color: #f3f4f6;
  border-radius: 8px;
  min-height: 100vh;
}

.title {
  display: flex;
  align-items: center;
  padding: 9rpx 15rpx 5rpx;
  position: relative;

  .guide-title {
    font-size: 38rpx;
    font-weight: 600;
    color: #333333;
    position: relative;
    padding-left: 10rpx;

    // 添加左侧蓝色装饰条
    &::before {
      content: '';
      position: absolute;
      left: -10rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 32rpx;
      background-color: #4169e1; // 蓝色装饰条
      border-radius: 3rpx;
    }
  }
}

.guide-container {
  column-count: 2;
  column-gap: 15px;
  padding: 0;
}

.guide-item {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 15px;
  break-inside: avoid;
  display: inline-block;
  width: 100%;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
}

.guide-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.guide-info {
  padding: 12px;
}

.guide-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.4;
  margin-bottom: 8px;
}

.guide-description {
  font-size: 24rpx;
  color: #606f7b;
  line-height: 1.4;
}

.loading-text {
  text-align: center;
  font-size: 14px;
  color: #909399;
  padding: 15px 0;
  column-span: all;
}
</style>
